<!DOCTYPE html>
<html lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head th:include="/common/inc::header"/>
<body>
<form class="layui-form" style="margin-top: 15px">
    <div class="layui-form-item">
        <label class="layui-form-label" style="width: 60px">时间:</label>
        <div class="layui-input-inline">
            <input type="text" name="startTime" id="startTime"
                   class="layui-input">
        </div>
        <button class="layui-btn" id="searchBtn" lay-submit lay-filter="searchBtn">查询</button>
    </div>
</form>
<div id="container1" style="height: 400px;width: 40%;margin-left: 30%"></div>
<div id="container2" style="height: 400px;width: 40%;margin-left: 30%"></div>
<script th:replace="/common/inc::incJs"></script>
<script>
    layui.use('laydate', function () {
        var laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
            elem: '#startTime', //指定元素
            format: 'yyyy-MM-dd'
        });
    });

    var dom = document.getElementById('container1');
    var myChart1 = echarts.init(dom, null, {
        renderer: 'canvas',
        useDirtyRect: false
    });
    var app = {};

    var option;

    option = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left'
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: '50%',
                data: [
                    {value: 5, name: '上午'},
                    {value: 8, name: '下午'},
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    if (option && typeof option === 'object') {
        myChart1.setOption(option);
    }


    dom = document.getElementById('container2');
    var myChart2 = echarts.init(dom);
    var option;

    option = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '5%',
            left: 'center'
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 40,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [
                    { value: 130, name: '安排人数' },
                    { value: 125, name: '实考人数' },
                ]
            }
        ]
    };

    option && myChart2.setOption(option);

    window.addEventListener('resize', myChart.resize);
</script>
</body>
</html>
